/*
 * @Author: hongbin
 * @Date: 2022-01-02 20:33:11
 * @LastEditors: hongbin
 * @LastEditTime: 2022-01-02 20:43:48
 * @Description:Pie-Custom
 */
import { FC, ReactElement } from "react";
import ReactEcharts from "echarts-for-react";

interface IProps {}

const PieCustom: FC<IProps> = (): ReactElement => {
  return (
    <ReactEcharts option={option} style={{ width: "100%", height: "50%" }} />
  );
};

export default PieCustom;

const option = {
  backgroundColor: "transparent",
  title: {
    text: "Customized Pie",
    left: "center",
    top: 20,
    textStyle: {
      color: "#666",
    },
  },
  tooltip: {
    trigger: "item",
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1],
    },
  },
  series: [
    {
      name: "Access From",
      type: "pie",
      radius: "55%",
      center: ["50%", "50%"],
      data: [
        { value: 335, name: "Direct" },
        { value: 310, name: "Email" },
        { value: 274, name: "Union Ads" },
        { value: 235, name: "Video Ads" },
        { value: 400, name: "Search Engine" },
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: "radius",
      label: {
        color: "#444",
      },
      labelLine: {
        lineStyle: {
          color: "#555",
        },
        smooth: 0.2,
        length: 10,
        length2: 20,
      },
      itemStyle: {
        color: "#c23531",
        shadowBlur: 200,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
      animationType: "scale",
      animationEasing: "elasticOut",
      animationDelay: function (idx: any) {
        return Math.random() * 200;
      },
    },
  ],
};
